import 'package:flutter/material.dart';

/// AppBar 示例
/// 展示了 AppBar 的常用属性和功能
class MyAppBarDemo extends StatefulWidget {
  const MyAppBarDemo({super.key});

  @override
  State<MyAppBarDemo> createState() => _MyAppBarDemoState();
}

class _MyAppBarDemoState extends State<MyAppBarDemo> {
  bool _isSearching = false;
  final TextEditingController _searchController = TextEditingController();

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  // 创建基本的 AppBar
  AppBar _buildBasicAppBar() {
    return AppBar(
      // 1. 标题部分
      title: const Text('基本 AppBar'),
      // 2. 背景色
      backgroundColor: Colors.blue,
      // 3. 阴影
      elevation: 4,
      // 4. 左侧按钮
      leading: IconButton(
        icon: const Icon(Icons.menu),
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: const Text('点击了菜单按钮'),
              duration: const Duration(seconds: 2),
              behavior: SnackBarBehavior.floating,
              margin: const EdgeInsets.all(16),
              action: SnackBarAction(
                label: '关闭',
                onPressed: () {
                  ScaffoldMessenger.of(context).hideCurrentSnackBar();
                },
              ),
            ),
          );
        },
      ),
      // 5. 右侧按钮组
      actions: [
        IconButton(
          icon: const Icon(Icons.favorite),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: const Text('点击了收藏按钮'),
                duration: const Duration(seconds: 2),
                behavior: SnackBarBehavior.floating,
                margin: const EdgeInsets.all(16),
                action: SnackBarAction(
                  label: '关闭',
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                  },
                ),
              ),
            );
          },
        ),
        IconButton(
          icon: const Icon(Icons.share),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: const Text('点击了分享按钮'),
                duration: const Duration(seconds: 2),
                behavior: SnackBarBehavior.floating,
                margin: const EdgeInsets.all(16),
                action: SnackBarAction(
                  label: '关闭',
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                  },
                ),
              ),
            );
          },
        ),
      ],
    );
  }

  // 创建搜索 AppBar
  AppBar _buildSearchAppBar() {
    return AppBar(
      leading: IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () {
          setState(() {
            _isSearching = false;
            _searchController.clear();
          });
        },
      ),
      title: TextField(
        controller: _searchController,
        decoration: const InputDecoration(
          hintText: '搜索...',
          border: InputBorder.none,
          hintStyle: TextStyle(color: Colors.white70),
        ),
        style: const TextStyle(color: Colors.white),
        onChanged: (value) {
          // 处理搜索文本变化
          print('搜索: $value');
        },
      ),
      actions: [
        IconButton(
          icon: const Icon(Icons.clear),
          onPressed: () {
            _searchController.clear();
          },
        ),
      ],
    );
  }

  // 创建自定义 AppBar
  AppBar _buildCustomAppBar() {
    return AppBar(
      // 1. 渐变背景
      flexibleSpace: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.purple],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
        ),
      ),
      // 2. 底部选项卡
      bottom: const TabBar(
        tabs: [
          Tab(icon: Icon(Icons.home), text: '首页'),
          Tab(icon: Icon(Icons.list), text: '列表'),
          Tab(icon: Icon(Icons.person), text: '我的'),
        ],
      ),
      // 3. 标题居中
      centerTitle: true,
      title: const Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.rocket_launch),
          SizedBox(width: 8),
          Text('自定义 AppBar'),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: _isSearching ? _buildSearchAppBar() : _buildBasicAppBar(),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                // AppBar 说明卡片
                Card(
                  margin: const EdgeInsets.symmetric(vertical: 8.0),
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: const [
                        Text(
                          'AppBar 功能展示',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(height: 10),
                        Text('1. 基本 AppBar：展示标准布局和按钮'),
                        Text('2. 搜索 AppBar：点击搜索按钮切换'),
                        Text('3. 自定义 AppBar：展示高级定制'),
                      ],
                    ),
                  ),
                ),

                const SizedBox(height: 16),

                // 切换到搜索按钮
                ElevatedButton.icon(
                  onPressed: () {
                    setState(() {
                      _isSearching = true;
                    });
                  },
                  icon: const Icon(Icons.search),
                  label: const Text('切换到搜索 AppBar'),
                ),

                const SizedBox(height: 16),

                // 自定义 AppBar 示例
                Container(
                  height: 300, // 设置固定高度
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    children: [
                      _buildCustomAppBar(),
                      const Expanded(
                        child: TabBarView(
                          children: [
                            Center(child: Text('首页内容')),
                            Center(child: Text('列表内容')),
                            Center(child: Text('我的内容')),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}